<template>
  <a-card :bordered="false" :bodyStyle="{ padding: '4px 12px' }" class="ax_plain_card">
    <a-flex justify="space-between" :align="'center'">
      <div class="flex gap-4">
        <div>
          <span>已选:</span>
          <a-tag :bordered="false" class="ml-4">{{ configTable.keys.length }}</a-tag>
        </div>
        <div>
          <span>总共:</span>
          <a-tag :bordered="false" class="ml-4">{{ configTable.query.total }}</a-tag>
        </div>
      </div>
      <a-pagination
          :total="configTable.query.total"
          :current="configTable.query.pageNum"
          :page-size="configTable.query.pageSize"
          show-size-changer
          @change="pageChange"
          show-quick-jumper
          show-less-items
      ></a-pagination>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
  import {configList} from '../../data/curd';
  import {configTable} from '../../data/table';

  const pageChange = (page: number, pageSize: number) => {
          configTable.value.query.pageNum = page;
          configTable.value.query.pageSize = pageSize;
          configList();
  };
</script>

<style lang="scss" scoped></style>